<template>
	<view class="order-view">
		<!-- tabs栏目 -->
		<van-tabs @click="tabsChange" color="#1baeae" title-active-color="#1baeae" class="order-tab">
			<van-tab title="全部" name=""></van-tab>
			<van-tab title="待付款" name="0"></van-tab>
			<van-tab title="待确认" name="1"></van-tab>
			<van-tab title="待发货" name="2"></van-tab>
			<van-tab title="待收货" name="3"></van-tab>
			<van-tab title="已完成" name="4"></van-tab>
		</van-tabs>

		<!-- 内容区域 -->
		<view class="content order-list">
			<view @click="goDetail(item.orderNo)" class="order-item" v-for="item in list" :key="item.orderId">
				<view class="order-item-header">
					<text>订单时间: {{ item.createTime }}</text>
					<text>{{ item.orderStatusString }}</text>
				</view>
				<van-card
					v-for="item2 in item.newBeeMallOrderItemVOS"
					:key="item2.goodsId"
					:num="item2.goodsCount"
					:price="item2.sellingPrice"
					desc="全场包邮"
					:title="item2.goodsName"
					:thumb="item2.goodsCoverImg"
				/>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onUnload,  onShow, onHide, onReachBottom } from '@dcloudio/uni-app'
import { getOrderList } from '../../api/modules/order'
import { reactive, toRefs } from 'vue'

const state = reactive({ list: [], status: '' , page: 1, hasMore: true, loading: true })

// 加载数据
const init = async () => {
	state.loading = true
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 发起请求
	const { data } = await getOrderList({ pageNumber: state.page, status: state.status })
	console.log(data)
	// 3. 合并数据
	state.list = state.list.concat(data.list) 
	state.loading = false
	// 4. 判断是否还有数据
	if(state.page >= data.totalPage) {
		state.hasMore = false
	}
}

// tab切换
const tabsChange = (e) => {
	const { name } = e.detail
	state.status = name || ''
	refresh()
}

// 刷新数据
const refresh = () => {
	state.list = []
	state.page = 1
	state.hasMore = true
	init()
}

// 跳转订单详情
const goDetail = (id) => {
	uni.navigateTo({ url: '/subpkg/order-detail/order-detail?orderNo=' + id })
}

// 页面到底了
onReachBottom(() => {
	if (state.loading) return
	if (!state.hasMore) return
	state.page ++
	init()
})

// 页面加载
onLoad(message => {
	// 监听refresh事件
	uni.$on('refresh', refresh)
	init()
})

// 页面卸载
onUnload(() => {
	uni.$off('refresh')
})

const { list } = toRefs(state)
</script>

<style lang="scss">
page {
	background-color: #f5f5f5;
}
.order-tab {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	border-bottom: 2rpx solid #e9e9e9;
}

.content {
	margin-top: 88rpx;
	background-color: #f5f5f5;
	padding: 2rpx 0;
	.order-item {
		margin: 20rpx;
		background-color: #fff;
		.order-item-header {
			padding: 20rpx 40rpx 10rpx 40rpx;
			@include fj();
			color: #2c3e50;
			text:last-child {
				color: red;
			}
		}
		.van-card {
			background-color: #fff;
			margin-top: 0;
		}
	}
}
</style>
